<!--
 * @Description: 卡片列表
 * @Author: zhaoxiaoyang & seadon
 * @LastEditors: seadon
 * @Date: 2021-07-16 16:57:14
 * @LastEditTime: 2022-09-22 18:14:15
-->
<template>
	<div class="card-title" @click="handleToggleTitle">
		<i
			class="low-code card-title-icon"
			:class="isOpen ? 'iconpackup' : 'iconjiantou-shouqi'"
		></i>
		<ellipsis-tooltip :title="group.name" />
	</div>
	<a-row
		v-show="isOpen"
		:gutter="[16, 16]"
		:class="`card-row-${pcAppCardType}`"
	>
		<a-col v-for="item in listData" :key="item.fb_key" :md="8">
			<!-- 动态加载卡片样式 -->
			<card-style-a
				v-if="pcAppCardType == 'CardStyleA'"
				:item="item"
				@toPath="toPath"
				@collectionEvents="collectionEvents"
			></card-style-a>
			<card-style-b
				v-if="pcAppCardType == 'CardStyleB'"
				:item="item"
				@toPath="toPath"
				@collectionEvents="collectionEvents"
			></card-style-b>
			<card-style-c
				v-if="pcAppCardType == 'CardStyleC'"
				:item="item"
				@toPath="toPath"
				@collectionEvents="collectionEvents"
			></card-style-c>
			<card-style-d
				v-if="pcAppCardType == 'CardStyleD'"
				:item="item"
				@toPath="toPath"
				@collectionEvents="collectionEvents"
			></card-style-d>
			<!-- <component :item="item" :is="currentComponent" @toPath="toPath" @collectionEvents="collectionEvents">
			</component> -->
		</a-col>
		<a-col v-if="group.total > data?.length" :lg="8">
			<a-card class="card-box card-all" @click="handleClickAll(group.groupId)">
				<all-loading v-if="allLoading" />
				<img v-else src="@/assets/images/all.svg" />
				<span class="card-all-text">
					{{ $t('pages.home.loadAll', '加载全部') }}
				</span>
			</a-card>
		</a-col>
	</a-row>
</template>
<script setup lang="ts">
import { ref, unref, watch } from 'vue'
import EllipsisTooltip from '@/entry_desktop/components/EllipsisTooltip'
import AllLoading from '../AllLoading.vue'

import CardStyleA from '@/entry_desktop/components/HomeCardStyle/CardStyleA.vue'
import CardStyleB from '@/entry_desktop/components/HomeCardStyle/CardStyleB.vue'
import CardStyleC from '@/entry_desktop/components/HomeCardStyle/CardStyleC.vue'
import CardStyleD from '@/entry_desktop/components/HomeCardStyle/CardStyleD.vue'

import type { IApplicationList } from '../../type'
import '../../index.less'

const props = defineProps<{
	data: IApplicationList[]
	group: Record<string, any>
	allLoading: boolean
	cardStyleType: string
	pcAppCardType: string
}>()
const emit = defineEmits(['onCollectionEvents', 'onSaveRecent', 'onGetAll'])

const isOpen = ref(true)

// const currentComponent = computed(() => {
//   return defineAsyncComponent(
//     () => import(`@/entry_desktop/components/HomeCardStyle/${props.cardStyleType}.vue`)
//   );
// });

const handleToggleTitle = () => {
	isOpen.value = !unref(isOpen)
}
const collectionEvents = (item: any) => {
	emit(
		'onCollectionEvents',
		item.collected ? '0' : '1',
		item.fb_key,
		item.group_id,
		item
	)
}
const toPath = (item: any) => {
	emit('onSaveRecent', item)
}
const handleClickAll = (groupId: string) => {
	emit('onGetAll', groupId)
}

const listData = ref<any>([])
watch(
	() => props.data,
	(val: any) => {
		listData.value =
			props.group.total > props.data?.length
				? props.data.slice(0, 11)
				: props.data
	},
	{
		immediate: true,
	}
)
</script>
